<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">在线申请</view>
		</view>
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">				

				<view class="form_box">
					<view class="title_box">
						<view class="title">车辆信息</view>
						<view class="text">(必填)</view>
					</view>
				
						<view class="list">
							<view class="name">品牌车型</view>
							<input type="text" v-model="car.title" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						
						<view class="list">
							<view class="name">车架号</view>
							<input type="text" v-model="car.vin" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list">
							<view class="name">车牌号</view>
							<input type="text" v-model="car.car_no" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list">
							<view class="name">车龄(月份)</view>
							<input type="text" v-model="car.month_age" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						
						<view class="list">
							<view class="name">里程(万里)</view>
							<input type="text" v-model="car.mileage" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						
						<view class="list">
							<view class="name">上牌时间</view>
							<input type="text" disabled="" v-model="car.reg_time" placeholder="请输入"
								placeholder-style="color:#B5B5B5" @click="show_date" />
						</view>
						<view class="list">
							<view class="name">指导价</view>
							<input type="text" v-model="car.market_price" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						
					<!-- 	<view class="more" @tap="addList">
							<view class="icon iconfont icon-jiahao2fill"></view>
							<view class="text">选择车辆</view>
						</view> -->
					
				</view>
				
				 <u-datetime-picker
				                ref="datetimePicker"
				                :show="date_show"
				               v-model="value1"
				                mode="date"
								:closeOnClickOverlay="true"
								@close="show_date()"
								@cancel="show_date()"
								@confirm="date_confirm"
								:formatter="formatter"
				        ></u-datetime-picker>
				
				<view class="rule_list" @tap="checkedAuto">
					<checkbox style="scale: 0.8;" color="#FF7F22" :checked="checked" ></checkbox>
					<view class="rule" :class="ruleMore ? 'rule02' : ''">承租人(以下统称“本方”)在此声明:本人提供的所有资料、信息是真实的，有效的并愿意按照出租人的规定办理手续， 
并保证为车辆所投保险确保出租人为第一受益人。贵司均有权保留此申请表及有关资料复印件，同意贵司向中国人民银行个人信用信息基础数据库和其他合规第三方数据机构查询本方的个人信用信息，并同意授权贵司将本方个人信息及信用信息，包括但不限于租金信息及对信息主体信用状况构成负面影响的信息，提供给中国人民银行个人信用信息基础数据库和其他合规第三方数据机构。</view>
				</view>
				<view class="rulearrow iconfont icon-iconfonti2-copy-copy-copy-copy" @tap="setRuleMore" v-if="ruleMore == false"></view>
				<view class="clear_box04"></view>
				
				<view class="confirm_menu">
					<view class="menu" @tap="backTo()">上一步</view>
					<view class="menu sub" :data-url="'/pages/index/form03'" @click="to_submit">提交信息</view>
				</view>
			</view>
		</view>

         <u-modal :show="show" :showCancelButton="true" @cancel="model_act" @confirm="model_com" :content="content" @close="model_act">
			 	<view class="slot-content">
			 		<rich-text :nodes="content"></rich-text>
			 	</view>
		 </u-modal>

	</view>
</template>

<script>
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				show : false,
				date_show: false,
				value1: Number(new Date()),
				content : '请仔细检查,确认需要提交该租赁单吗？',
				
				ruleMore:false,
				checked:false,
				index:0,
				matrimony:'',
				page: 1,
				scrrol: false,
				info: '',
				car: {
					id : 0,
					title: '',
					vin: '',
					car_no: '',
					market_price : '',
					reg_time : Number(new Date()),
					mileage : '',
					month_age : '',
					
				}
			}
		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
		onLoad() {
			
			this.$refs.datetimePicker.setFormatter(this.formatter);
            let car = uni.getStorageSync('loans_car');
			uni.setStorageSync('loans_car','');
			if(Object.keys(car).length > 0){
				car.reg_time = helper.format_date(car.reg_time);
				this.car = car;
			}
			
		},
		methods: {
			model_act(){
				this.show = !this.show; 
			},
			model_com(){
				this.show = !this.show; 
				uni.showLoading({
					title: '提交中,请稍后'
				});
				helper.Timer.start();
			    let param = uni.getStorageSync('pre_loans_order');
				param.car_info =  JSON.stringify(this.car);
				//时间控制
				let url = this.site_url + 'api/auth/order/create_order_loans';
				if(param.order_id){
					 url = this.site_url + 'api/auth/order/update_order_loans';
				}
				
				this.areq(url,param,'POST').then(res=>{
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(2000);
					setTimeout(() => {
						uni.hideLoading();
						  if(res.code == 1){
							  this.showMsg('申请成功');
							  setTimeout(()=>{
								  this.$r('/pages/index/form03','rel');
							  },1500); 
						  }else{
							   this.showMsg(res.msg);
						  }
					  },left_time);		  
					  
				});
			},
			to_submit(e){
				try{
					if(this.checked == false){
						throw '请先阅读并勾选协议';
					}
					if(this.car.car_no ==''){
						throw '请填写车牌号';
					}
					if(this.car.vin == ''){
						throw '请填写车架号';
					}
					this.show = true;
				}catch(err){
					this.showMsg(err);
				}
			},
			date_confirm(e){
				 this.car.reg_time = helper.format_date(e.value/1000);
				 this.date_show = false;
			},
			show_date(){
				this.date_show = !this.date_show;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			setRuleMore(){
				let that = this;
				that.ruleMore = !that.ruleMore
			},
			checkedAuto(){
				let that = this;
				that.checked = !that.checked;
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value;
				this.matrimony = this.array[e.detail.value];
			},
			addList() {
			
			},
			setRule(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
	
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		background-color: transparent !important;
		color: #333 !important;
	}

	.scrrolHeader {
		background-color: #F9E9E3 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}

	.form_box {
		width: 100%;
		background-color: #fff;
		border-radius: 3vw;
		padding: 4vw;
		margin-bottom: 4%;
	}

	.form_box .title_box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.form_box .title_box .title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-right: 1vw;
	}

	.form_box .title_box .text {
		font-size: 4.2vw;
		color: #FC5D20;
		font-weight: bold;
	}

	.form_box .title_box .text02 {
		color: #B5B5B5;
	}

	.form_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}

	.form_box .list .name {
		font-size: 3.8vw;
		color: #333;
		margin-right: 4vw;
	}

	.form_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
	}

	.form_box .list .arrow {
		font-size: 3.5vw;
		color: #B5B5B5;
	}

	.form_box .more {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 4%;
	}

	.form_box .more .icon {
		font-size: 4.5vw;
		color: #FC5D20;
		margin-right: 1vw;
	}

	.form_box .more .text {
		font-size: 3.5vw;
		color: #FC5D20;
	}
	
	.rule_list{
		width: 100%;
		margin: 4vw auto 0;
		display: flex;
		box-sizing: border-box;
	}
	
	.rule_list .rule{
		font-size: 3.2vw;
		color: #999;
		line-height: 6vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.rule_list .rule02{
		display: block;
	}
	
	.rulearrow{
		width: 100%;
		text-align: center;
		font-size: 6vw;
		color: #FC5D20;
		margin-top: 1vw;
	}
</style>